<template name="gateway">
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<view id="editor">
				<cu-custom bgColor="bg-gradual-pink" :isBack="true">
					<block slot="content">实时动态</block>
				</cu-custom>
			</view>
			<view class="disflex" :style="{ top: TopNum + 'px' }">
				<view class="searchtip">
					<uni-search-bar placeholder="请输入隐患描述" @confirm="search" v-model="formData.dangerDesc">
					</uni-search-bar>
				</view>
				<span>
					<analysisdrawer :type="typelei" ref="mainindex" @testShowTwo="getlist"></analysisdrawer>
				</span>

			</view>

			<view class="shequcontent">
				<view class="listdetail">
					<view class="li" v-for="(item,index) in formDatalist" @click="getdetail(item.placeId)">
						<view class="listtop margin-bottom">
							<span>{{item.createBy}}</span>
							<span>{{item.createTime}}</span>
						</view>

						<text class="planame margin-bottom">{{item.dangerDesc}}</text>
						<view class="middle_img">
							<view class="Colt_center_middleImg" v-for="(items,i) in item.photoList" :key="i">
								<view class="img_wapBox">
									<image class="imag" :src="items.url" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view class="label margin-bottom">{{item.address}}</view>
						<view class="label margin-bottom">{{item.placeName}}</view>
						<view class="listbottom">
							<view class="zheng">查看场所</view>
							<view class="jibie">{{item.level}}级隐患</view>
						</view>

					</view>
				</view>
			</view>

		</scroll-view>

	</view>
</template>

<script>
	import searchinput from '../component/searchinput.vue'
	import analysisdrawer from '../component/analysisdrawer.vue'
	export default {

		name: 'gateway',
		props: {
			cur: String,
		},
		watch: {

		},
		data() {
			return {
				typelei:6.1,
				dangerDesc: '',
				TopNum: '',
				modalName: null,
				formDatalist: [],
				formData: {
					dangerDesc: '',
					level: '',
					reviewStatus: '',
					placeType: '',
					community: '',
					startTime: '',
					endTime: '',

				}
			}
		},
		mounted() {
			this.getlist()
			this.$nextTick(function() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#editor').boundingClientRect(data => {
					console.log(data)
					this.TopNum = data.height
				}).exec();
			})



		},
		methods: {
			getdetail(id) {
				uni.navigateTo({
					// ? 后面加要传的参数， 多个参数用 & 隔开 
					url: '/pages/siteinvestigation/detail?id=' + id
				})
			},
			search() {
				this.getlist()
			},
			//获取列表
			getlist(rel) {
				console.log(rel)
				var formData = []
				if (rel) {
					formData = rel
				} else {
					formData = this.formData
				}
				this.$refs.mainindex.closeDrawer()
				console.log(formData)
				//显示加载框
				uni.showLoading({
					title: '加载中'
				});
				this.$http.get("/place/danger/page", {
					params: formData
				}).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.formDatalist = res.data.result.records
						// this.$tip.success('获取列表成功!')
						uni.hideLoading();
					} else {
						this.$tip.success('获取列表失败!')
						uni.hideToast();
					}


				})
			},
		},
		components: {
			searchinput,
			analysisdrawer
		}
	}
</script>

<style scoped lang="scss">
	.disflex {
		display: flex;
		justify-content: space-between;
		position: fixed;
		top: 45px;
		width: 100%;
		z-index: 2 !important;


		span {
			width: 20%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: white;
		}
	}

	// 时间
	.uni-btn-v {
		// display: flex;
		// margin-top: 20px;
		// position: fixed;
		// bottom: 0;
		width: 100%;

		uni-button {
			width: 100%;
			border-radius: 30px;
			margin: 10px;
		}

		uni-button:after {
			border: unset;
		}
	}

	.shequcontent {
		margin-top: 56px;

		.listdetail {
			float: left;
			padding-top: 5px;

			.li {
				float: left;
				padding: 10px 5px;
				background: white;
				margin-bottom: 10px;
				margin: 0 5px 5px 5px;
				border-radius: 10px;

				.planame {
					float: left;
					width: 100%;
				}

				.listtop {
					width: 100%;
					color: #969292;
					float: left;
					span:nth-child(1) {
						font-size: 18px;
						color: #007aff;
					}

					span:nth-child(2) {
						float: right;
					}
				}

				text {
					font-size: 15px;
				}

				.imglist {
					float: left;
					width: 100%;

					uni-image {
						float: left;
						width: 124px;
						height: 80px;
					}

				}

				.label {
					font-size: 15px;
					color: #999;
					float: left;
					width: 100%;
				}

				.listbottom {
					float: left;
					width: 100%;

					.jibie {
						float: right;
						margin-right: 10px;
					}

					.jibie,
					.zheng {
						border: 1px solid #525252;
						padding: 8px 15px;
						border-radius: 30px;
						color: #525252;
						font-size: 14px;
					}

					.zheng {
						float: right;
					}
				}
			}
		}
	}
	.margin-bottom{
		margin-bottom: 10px;
	}
</style>
